ProjectGrid = function(){
	var reader = new Ext.data.XmlReader({
               record: 'project',
               id: 'id'
           }, [
               'name', 
			   'client',
               'description', 
			   {name:'start', type: 'date', dateFormat: 'Y-m-d'}, 
			   {name: 'end', type: 'date', dateFormat: 'Y-m-d'} 
           ]);
    // create the Data Store
	var ds = new Ext.data.GroupingStore({
				url: '/projects',
				reader: reader,
				sortInfo:{field: 'name', direction: "ASC"},
				groupField:'name'           
		    });

    var cm =new Ext.grid.ColumnModel([
			{header: "Nombre", width: 300, dataIndex: 'name', editor: new Ext.form.TextField({allowBlank: false})},
			{header: "Cliente", width: 180, dataIndex: 'client', editor: new Ext.form.TextField({allowBlank: false})},
			{header: "Descripcion", width: 180, dataIndex: 'description', editor: new Ext.form.TextField({allowBlank: false})},
			{header: "Inicio", width: 180, dataIndex: 'start', renderer: Ext.util.Format.dateRenderer('Y-d-m'), editor: new Ext.form.DateField({format: 'Y-d-m '})},
			{header: "Fin", width: 180, dataIndex: 'end', renderer: Ext.util.Format.dateRenderer('Y-d-m'), editor: new Ext.form.DateField({format: 'Y-d-m '})}
	]);
	
    cm.defaultSortable = true;

	var viewGroup = new Ext.grid.GroupingView({
			forceFit:true,
			columnsText: 'Columnas',
			sortAscText : 'Ordenar Asc',
			sortDescText : 'Ordenar Desc',
			groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
		});
	
	var sm = new Ext.grid.RowSelectionModel({singleSelect:true});
    
    var grid = new Ext.grid.EditorGridPanel({
		ds: ds,
        cm: cm,
		selModel: sm,
        renderTo:'example-grid',
        width:800,
        height:450,
        view: viewGroup,
		frame:true,
		collapsible: true,
		title: 'Proyectos',
		iconCls: 'icon-grid',
		loadMask: 'Cargando Proyectos...',
		tbar:[{
            text:'Agregar',
            tooltip:'Agregar un nuevo Proyecto',
			handler: function(){
            Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');
			},
            iconCls:'add'
        },'-',{
            text:'Eliminar',
            tooltip:'Eliminar los proyectos seleccionados',
            iconCls:'remove'
        }		
		]
    });
	
    ds.load();
};